<template>
	<view class="">
		<cu-custom bgColor="bg-white" :isBack="true" >
			<block slot="left">
				<image :src="imgUrl + '/images/tianjia.png'" mode="aspectFill" class="image-slot" @click="GotoPopfriends"></image>
			</block>
			<block slot="content">通讯录</block>
		</cu-custom>
		<!-- 添加好友弹出层 -->
		<free-left-popup v-if="showleft" ref="extendpopup" :bodyWidth="285" :bodyHeight="325"
			bodyBgColor="bg-dark" transformOrigin="right top">
			<view class="flex flex-column" 
			style="width: 285rpx;height: 325rpx;">
				<view class="flex-1 flex align-center" 
				hover-class="bg-hover-dark"
				v-for="(item,index) in extentsList"
				:key="index"
				@click="clickEvent(item)">
					<image class="margin-sm" style="width: 38rpx; height: 38rpx;" :src="item.icon"></image>
					<text class="font-md text-white">{{item.name}}</text>
				</view>
			</view>
		</free-left-popup>
		<!-- 搜索框 -->
		<u-search placeholder="请输入关键字" disabled="true" shape="round" :clearabled="true" :show-action="false" v-model="keyword"  margin="20rpx" @click="gotosearch"></u-search>
		<!-- 通讯录列表 -->
		<scroll-view scroll-y="true" :style="'height:'+scrollHeight+'px;'"
			:scroll-into-view="scrollInto">
			<free-list-item v-for="(item,index) in topList" 
			:key="item.id"
			:title="item.title" :cover="item.cover" 
			:showRight="item.id === 'friend' && applyCount > 0"
			@click="navigate(item.path)">
				<view slot="right">
					<free-badge v-if="applyCount > 0" :value="applyCount"></free-badge>
				</view>
			</free-list-item>
			
			<view v-for="(item,index) in list" :key="index"
			:id="'item-'+item.title">
				<view v-if="item.list.length" 
				class="py-2 px-3 border-bottom bg-light">
					<text class="font-md text-dark">{{item.title}}</text>
				</view>
				<free-list-item v-for="(item2,index2) in item.list" 
					:key="index2" :title="item2.name" 
					:cover="item2.avatar ? item2.avatar : 'https://hys-online.oss-cn-guangzhou.aliyuncs.com/hyz/icon/images/userpic.png'"
				@click="gotoUserBase(item2)"></free-list-item>
			</view>
		</scroll-view>
		<!-- 侧边导航条 -->
		<view class="position-fixed right-0 bottom-0 bg-light flex flex-column" :style="'top:'+top+'px;'" 
			style="width: 50rpx;" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">
			<view class="flex-1 flex align-center justify-center"
			v-for="(item,index) in list" :key="index">
				<text class="font-sm text-muted">{{item.title}}</text>
			</view>
		</view>
		
		<view class="position-fixed rounded-circle bg-light border flex align-center justify-center" v-if="current"
		style="width: 150rpx;height: 150rpx;left: 300rpx;"
		:style="'top:'+modalTop+'px;'">
			<text class="font-lg">{{current}}</text>
		</view>
	</view>
</template>

<script>
	// import { list } from '@/common/index-list.js'
	import freeLeftPopup from "@/components/free-ui/free-left-popup.vue"
	import freeListItem from "@/components/free-ui/free-list-item.vue"
	import freeBadge from "@/components/free-ui/free-badge.vue"
	import auth from '@/components/mixin/auth.js';
	import { mapState } from 'vuex'
	export default {
		mixins:[auth],
		components: {
			freeListItem,
			freeLeftPopup,
			freeBadge
		},
		data() {
			return {
				imgUrl:this.$site.img_url,
				top:0,
				keyword: '',
				showleft:true,
				scrollHeight:0,
				scrollInto:'',
				current:'',
				extentsList:[
					{
						name:"发起群聊",
						event:"navigateTo",
						path:'/pages/infochat/mail?type=createGroup',
						icon:"https://hys-online.oss-cn-guangzhou.aliyuncs.com/hyz/icon/chat-group.png"
					},
					{
						name:"添加好友",
						event:"navigateTo",
						path:'/pages/message/search/search',
						icon:"https://hys-online.oss-cn-guangzhou.aliyuncs.com/hyz/icon/add-user.png"
					},
					{
						name:"扫一扫",
						event:"scan",
						icon:"https://hys-online.oss-cn-guangzhou.aliyuncs.com/hyz/icon/search-one.png"
					},
				
				],
				topList:[
					{
						id:"friend",
						title:"新的朋友",
						cover:"https://hys-online.oss-cn-guangzhou.aliyuncs.com/hyz/icon/friend.png",
						path:"infochat/apply-list"
					},
					{
						id:"group",
						title:"群聊",
						cover:"https://hys-online.oss-cn-guangzhou.aliyuncs.com/hyz/icon/group.png",
						path:"infochat/group-list"
					},
					{
						id:"tag",
						title:"标签",
						cover:"https://hys-online.oss-cn-guangzhou.aliyuncs.com/hyz/icon/tag.png",
						path:"infochat/tab-list"
					}
				],
				// list:list,
			}
		},
		onLoad() {
			let res = uni.getSystemInfoSync()
			this.top = res.statusBarHeight + uni.upx2px(190)
			this.scrollHeight = res.windowHeight - this.top
			console.log(this.scrollHeight,'...................');
			this.$store.dispatch('getMailList')
			// this.getMyfriendList()
		},
		computed: {
			...mapState({
				applyCount:state=>state.user.apply.count,
				list:state=>state.user.mailList
			}),
			modalTop(){
				return (this.scrollHeight - uni.upx2px(150)) / 2
			},
			// 每个索引的高度
			itemHeight() {
				let count = this.list.length
				if(count < 1){
					return 0
				}
				return this.scrollHeight /  count
			}
		},
		methods: {
			//搜索列表
			gotosearch(){
				uni.navigateTo({
					url:'../search/search'
				})
			},
			//添加好友
			GotoPopfriends(){
				this.$refs.extendpopup.show(uni.upx2px(485),uni.upx2px(120))
			},
			clickEvent(e){
				switch (e.event){
					case 'navigateTo':
					uni.navigateTo({
						url: e.path,
					});
						break;
					case 'scan':
					uni.scanCode({
					    success: (res)=> {
							if(res.scanType === 'QR_CODE'){
								let result = JSON.parse(res.result)
								switch (result.type){
									case 'group':
									uni.showLoading();
									this.$C.post('/group/checkrelation',{
										id:parseInt(result.id)
									}).then(res2=>{
										if(!res2.status){
											uni.navigateTo({
												url: '/pages/message/scan-add/scan-add?params='+encodeURIComponent(JSON.stringify(res2.group)),
											});
										} else {
											uni.navigateTo({
												url: '/pages/inchat/chat?params='+encodeURIComponent(JSON.stringify({
													id:res2.group.id,
													name:res2.group.name,
													avatar:res2.group.avatar,
													chat_type:'group',
												})),
											});
											this.chat.readChatItem(res2.group.id,res2.group.chat_type)
										}
										uni.hideLoading()
									}).catch(err=>{
										uni.hideLoading()
									})
									
										break;
									case 'user':
									uni.navigateTo({
										url: '/pages/infochat/user-base?user_id='+result.id,
									});
										break;
									default:
										break;
								}
							}
					    }
					});
						break;
					default:
					uni.showToast({
						title: '靓仔自己发挥',
						icon: 'none'
					});
						break;
				}
			},
			touchstart(e){
				this.changeScrollInto(e)
			},
			touchmove(e){
				this.changeScrollInto(e)
			},
			touchend(e){
				this.current = ''
			},
			gotoUserBase(item2){
					uni.navigateTo({
						url:'../../infochat/user-base?user_id='+item2.user_id
					})
			},
			// 联动
			changeScrollInto(e){
				let Y = e.touches[0].pageY
				// // #ifdef MP
				// Y = Y - this.top
				// // #endif
				let index = Math.floor((Y / this.itemHeight)-5)
				let item = this.list[index]
				if(item){
					this.scrollInto = 'item-'+item.title
					this.current = item.title
				}
			},
			//获取我的通讯录好友列表
			getMyfriendList(){
				this.$C.get('/friend/list',{
					// keyword:this.keyword
				}).then(res=>{
					this.list = res.rows.newList ? res.rows.newList : []		
				})
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: $u-content-color;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
	}
	.image-slot{
		width: 40rpx; 
		height: 50rpx;
		margin: 20rpx 10rpx 0 20rpx;
	}
</style>
